<template>
  <div class="list">
    <!-- :label-col="{span: 5}"-->
    <a-form
        ref="searchFormRef"
        class="search-form base-mb15"
        :model="searchFormState"
        :label-col="{ style: { minWidth: '100px'}}"
        @finish="onSearchFinish"
    >
      <a-row :gutter="[10, 24]">
        <a-col :md="8" :lg="8" :xl="6">
          <a-form-item name="cardNo" :label="$t('self.userCharge.tips21')">
            <a-input v-model:value="searchFormState.cardNo"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :lg="8" :xl="6">
          <a-form-item name="mobile" :label="$t('self.userCharge.tips4')">
            <a-input v-model:value="searchFormState.mobile"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :lg="8" :xl="6">
          <a-form-item name="orgId" :label="$t('self.userCharge.tips9')">
            <a-select v-model:value="searchFormState.orgId" :options="searchOrgOptions" :fieldNames="{label: 'orgName',value: 'id'}" :placeholder="$t('self.pleaseChoose')"/>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row :gutter="[10, 24]" class="base-mt20">
        <a-col :md="8" :lg="8" :xl="6">
          <a-form-item name="startTime" :label="$t('self.userCharge.tips10')">
            <a-date-picker v-model:value="searchFormState.startTime" style="width: 100%;"/>
          </a-form-item>
        </a-col>

        <a-col :md="8" :lg="8" :xl="6">
          <a-form-item name="endTime" :label="$t('self.userCharge.tips11')" :label-col="{ style: { width: '100px' } }">
            <a-date-picker v-model:value="searchFormState.endTime" style="width: 100%;"/>
          </a-form-item>
        </a-col>

        <a-col :md="{span: 7, offset: 1}" :lg="{span: 7, offset: 1}" :xl="{span: 6, offset: 1}" class="base-flex base-rows">
          <a-button type="primary" html-type="submit">{{ $t('self.searchButton') }}</a-button>
          <a-button class="base-ml10" @click="resetSearchForm">{{ $t('self.resetButton') }}</a-button>
        </a-col>
      </a-row>

    </a-form>

    <s-table ref="stableRef" :api-obj="tableConfig.apiObj" api-method="POST" :columns="sourceColumn" row-key="id" :light-index="tableConfig.lightIndex" :is-row-selection="false" @selectionChange="tableSelectionChange" :is-show-tool="false" :scroll="{ x: 1400 }">
      <template #bodyCell="{ column, record, index }">

        <!--来源-->
        <template v-if="column.key === 'sourceType'">
            {{ getSourceTypeTxt(record[column.key]) }}
        </template>

        <!--交易状态-->
        <template v-if="column.key === 'status'">
          {{ getStatusTxt(record[column.key]) }}
        </template>

        <template v-if="column.key === 'action'">
            <span>
              <a href="javascript:void(0)" @click="openDetailModal(record, index)">{{ $t('self.detailView') }}</a>
            </span>
        </template>

      </template>
    </s-table>

  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ScStatusIndicator from '@/components/scMini/scStatusIndicator.vue'
import { mainStore } from '@/stores/mainStore'
import dayjs from 'dayjs'

const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $API = proxy.$API
const $T = proxy.$t
const route = useRoute()
const router = useRouter()
const useMainStore = mainStore()

const selectedKey = ref([])
const stableRef = ref(null)
const tableConfig = ref({
  apiObj: $API.backend.userCharge.list,
  lightIndex: [] // 要高亮的行号
})
// 表格列
const sourceColumn = ref([])

onMounted(async () => {
  // 获取表格列
  resetDefaultOptionsByLang()
  // 获取运营商下拉数据
  searchOrgOptions.value = await proxy.getOrgSelectList(true)
})

// 监听 lang 状态
watch(
    () => useMainStore.lang, // 切换语言包时
    (curr, old) => {
      // console.log('语言包', curr)
      // 获取表格列
      resetDefaultOptionsByLang()
    }
)

const resetDefaultOptionsByLang = () => {
  sourceColumn.value = [
    {
      title: $T('self.order.tips1'),
      dataIndex: 'chargeNo',
      key: 'chargeNo'
    },
    {
      title: $T('self.userCharge.tips3'),
      dataIndex: 'userName',
      key: 'userName',
      customRender: ({text, record}) => {
          return record.firstName + ' ' + record.lastName
      },
    },
    {
      title: $T('self.userCharge.tips12'),
      dataIndex: 'agent',
      key: 'agent'
    },
    {
      title: $T('self.order.tips31'),
      dataIndex: 'cardNo',
      key: 'cardNo'
    },

    {
      title: $T('self.userCharge.tips4'),
      dataIndex: 'mobile',
      key: 'mobile'
    },
    {
      title: $T('self.user.tips9'),
      dataIndex: 'email',
      key: 'email'
    },
    {
      title: $T('self.userCharge.tips5'),
      dataIndex: 'chargeMoney',
      key: 'chargeMoney'
    },
    {
      title: $T('self.userCharge.tips6'),
      dataIndex: 'consumeMoney',
      key: 'consumeMoney'
    },
    {
      title: $T('self.userCharge.tips7'),
      dataIndex: 'sourceType',
      key: 'sourceType'
    },
    {
      title: $T('self.userCharge.tips8'),
      dataIndex: 'status',
      key: 'status'
    },
    {
      title: $T('self.createTimeTxt'),
      dataIndex: 'createTime',
      key: 'createTime'
    },
    // { title: $T('self.actionButton'), key: 'action', ellipsis: true, fixed: 'right', width: 100 }
  ]
  // 来源
  // 2 后台财务卡片充值，
  // 4 cash充值
  // 5 MTNMobileMoney充值
  // 6 MomoCode充值
  // 7 CreditCard充值
  // 8 AirtelMoney充值
  sourceTypeOptions.value = [
    { label: $T('self.userCharge.sourceTypes.tips1'), id: 2 },
    { label: $T('self.userCharge.sourceTypes.tips2'), id: 4 },
    { label: $T('self.userCharge.sourceTypes.tips3'), id: 5 },
    { label: $T('self.userCharge.sourceTypes.tips4'), id: 6 },
    { label: $T('self.userCharge.sourceTypes.tips5'), id: 7 },
    { label: $T('self.userCharge.sourceTypes.tips6'), id: 8 },
  ]
  // 状态  0待付款，1付款成功，2付款失败,3已退款
  statusOptions.value = [
    { label: $T('self.userCharge.status.tips1'), id: 0 },
    { label: $T('self.userCharge.status.tips2'), id: 1 },
    { label: $T('self.userCharge.status.tips3'), id: 2 },
    { label: $T('self.userCharge.status.tips4'), id: 3 },
  ]
}

const tableSelectionChange = (rows, record) => {
  selectedKey.value = rows
  // console.log('表格选择项', rows, record)
}

// =========start search表单
const searchFormRef = ref(null)
const searchFormState = ref({
  cardNo: '',
  mobile: '',     // 手机号码
  orgId: null,    // 运营商及场站
  startTime: '',  // 开始时间
  endTime: '',    // 开始时间
})
const searchOrgOptions = ref([])
const onSearchFinish = (values) => {
  // 日期处理 / 日期转换
  values.startTime = values.startTime ? dayjs(values.startTime).format('YYYY-MM-DD') : ''
  values.endTime = values.endTime ? dayjs(values.endTime).format('YYYY-MM-DD') : ''
  stableRef.value.upData(values, 1)
}
// 重置搜索表单
const resetSearchForm = () => {
  searchFormRef.value.resetFields()
}
// =========end search表单


const sourceTypeOptions = ref([])
const statusOptions = ref([])
const getSourceTypeTxt = (status) => {
  status = parseInt(status)
  const defaultShowContent = '--'
  return sourceTypeOptions.value.find(item => item.id === status)?.label || defaultShowContent
}
const getStatusTxt = (status) => {
  status = parseInt(status)
  const defaultShowContent = '--'
  return statusOptions.value.find(item => item.id === status)?.label || defaultShowContent
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  background: #ffffff;
  padding: 15px;

  .search-form {
    padding: 16px;
    background: rgb(247, 248, 250);

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }
}
</style>
